<template>
	<div class="followLineWrap"  v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
		<div class="listSing" v-for="(item, index) in list" :key="index">
			<mt-cell-swipe
			:right="[{
				content: '删除',
				style: { background: 'red', color: '#fff' },
				handler: () => refuse(item.guid)
			}]" >
			<div class="tit">
				<span>{{item.startSiteName}}</span>
				<span class="sion">--</span>
				<span>{{item.endSiteName}}</span>
				<i class="return" :class="{oneWay:item.ifReturn==0}">{{item.ifReturn==0?"单程":"往返"}}</i>
			</div>
		</mt-cell-swipe>
	</div>
	<!-- 底部判断是加载图标还是提示“全部加载” -->
	<div class="more_loading">
		<div v-show="showLoading">
			<mt-spinner type="snake" color="#00ccff" :size="10"></mt-spinner>
			<span>正在加载</span>
		</div>
		<span v-show="showALlLoad">已全部加载</span>
	</div>
	<div class="foot">
		<a href="javascript:;" @click="this.addLine">添加线路</a>
	</div>
</div>
</template>
<script type="text/ecmascript-6">
import Vue from "vue";
import ApiService from "@/services/API-servies";
import { CellSwipe, InfiniteScroll, Spinner,MessageBox } from "mint-ui";
Vue.use(InfiniteScroll);
export default {
  data() {
    return {
      list: [],
      pageNo: 1, //默认分页为第一页
      pageSize: 10, //默认每页显示8条数据
      showLoading: true,
      showALlLoad: false,
      busy: true //默认允许滚动执行loadMore函数
    };
  },
  created() {
    this.rightButtons = [
      {
        content: "删除",
        style: { background: "red", color: "#fff" },
        handler: () => this.delete()
      }
    ];
  },
  mounted() {
    setTimeout(() => {
      if (this.$isBrower.isAndroid) {
      } else if (this.$isBrower.isIos) {
        this.setIosTitleType();
      }
    }, 0);
    this.load();
  },
  methods: {
    load() {
      this.showLoading = true;
      this.showALlLoad = false;
      ApiService.line
        .load({
          pageSize: this.pageSize,
          pageNo: this.pageNo
        })
        .then(res => {
          this.showLoading = false;
          if (res.meta.retCode === "0") {
            res.data.list.forEach(function(b, index) {
              let startSite = b.startSiteName.split("-");
              let endSite = b.endSiteName.split("-");
              if (startSite.length > 0) {
                b.startSiteName = startSite[0] + "-" + startSite[1];
              }
              if (startSite.length > 2) {
                b.endSiteName = startSite[0] + "-" + endSite[1];
              }
            });

            this.list = this.list.concat(res.data.list); //分页数据追加到这个list里面
            if (res.data.list.length == 0) {
              //判断数是否加载完成，就让数据截停
              this.busy = true;
              this.showLoading = false;
              this.showALlLoad = true;
            } else {
              this.busy = false;
            }
          }
        });
    },
    refuse(id) {
      ApiService.line
        .remove({
          guid: id
        })
        .then(res => {
          if (res.meta.retCode === "0") {
            MessageBox({
              title: "提示",
              message: "删除成功",
              showCancelButton: false
            }).then(action => {
              if (action == "confirm") {
				this.list=[];
				this.pageNo = 1;
            	this.load();
              }
            });
            // this.$router.push({ name:"",path: '/followLine'});
          }
        });
    },
    addLine() {
      this.$router.push("addLine");
    },
    loadMore: function() {
      this.busy = true;
      setTimeout(() => {
        this.pageNo++;
        this.load();
      }, 500);
    },
    //ios 设置头部信息
    setIosTitleType() {
      let params = {
        isReturn: true,
        isSearch: false,
        isTitleSegment: false
      };
      this.$bridge.callhandler("needBarButton", params, data => {});
    }
  },
  filters: {},
  components: {
    MtCellSwipe: CellSwipe,
    MtSpinner: Spinner
  }
};
</script>
<style lang="less" type="stylesheet/less">
@import "~common/less/variable";
.followLineWrap {
  margin-bottom: 90px;
  padding: 0;
  background: #fff;
  .listSing {
    border-bottom: 2px solid #ccc;
    .mint-cell-wrapper {
      position: relative;
    }
    .tit {
      margin-left: 40px;
      width: 690px;
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      color: #333;
      display: flex;
      display: -webkit-flex; /* Safari */
      align-items: center;
      span {
        font-size: 28px;
        font-weight: 800;
        display: inline-block;
        width: 240px;
        line-height: 40px;
      }
      .sion {
        width: 40px;
        display: inline;
        margin: 0 40px;
      }
      i {
        position: absolute;
        right: 0;
        bottom: 20px;
        font-size: 24px;
        padding: 8px;
        border-radius: 6px;
        display: inline-block;
        line-height: 30px;
        &.oneway {
          color: #fe7e00;
          border: 2px solid #fe7e00;
        }
        &.return {
          color: #318eff;
          border: 2px solid #318eff;
          &.oneWay {
            color: #fe7e00;
            border: 2px solid #fe7e00;
          }
        }
      }
    }
  }
  .foot {
    position: fixed;
    bottom: 0;
    width: 100%;
    a {
      display: block;
      background: @blue;
      color: #fff;
      font-size: 32px;
      line-height: 90px;
      text-align: center;
    }
  }
  .more_loading {
    text-align: center;
    .mint-spinner-snake {
      display: inline-block;
      vertical-align: middle;
      margin-right: 10px;
    }
  }
}
</style>
